<template>
    <div>
        <Card>
            <p slot="title">
                财务系统管理
            </p>
            <!--搜索表单-->
            <Form inline onsubmit="return false">

                <FormItem>
                    <Select clearable placeholder="全部" v-model="filters.type" style="width: 100px;"
                            @on-change="getData(1)" >
                        <Option v-for="item in typeList" :value="item.key" :key="item.key">{{item.title}}</Option>
                    </Select>
                </FormItem>

                <!--项目名称-->
                <FormItem label="项目名称" :label-width="70">
                    <Input v-model="form.description"/>
                </FormItem>

                <!--公司名称 -->
                <FormItem label="公司名称" :label-width="70">
                    <Input v-model="form.description"/>
                </FormItem>

                <!--手机号码 -->
                <FormItem label="手机号码" :label-width="70">
                    <Input v-model="form.description"/>
                </FormItem>

                <!--姓名 -->
                <FormItem label="姓名" :label-width="60">
                    <Input v-model="form.description"/>
                </FormItem>

                <!--开始时间-->
                <FormItem>
                    <DatePicker type="datetime" placeholder="支付时间" format="yyyy-MM-dd"
                                v-model="filters.startDate"></DatePicker>
                    </Col>
                </FormItem>
                <!--结束时间-->
                <FormItem>
                    <DatePicker type="datetime" placeholder="到期时间" format="yyyy-MM-dd"
                                v-model="filters.endDate">
                    </DatePicker>
                </FormItem>

                <FormItem>
                    <Button type="primary"@click="getData(1)">搜索</Button>
                </FormItem>


                <!--导出-->
                <FormItem>
                    <Button type="primary" :loading="exportLoading"@click="exportXlsx">导出</Button>
                </FormItem>

            </Form>

            <!--添加数据-->
            <Form ref="form" inline :rules="formRules" onsubmit="return false" v-if="buttonSHow.add" >
                <FormItem label="类型" :label-width="40" >
                    <Select v-model="form.type">
                        <Option v-for="item in tList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="项目名称" :label-width="70">
                    <Input v-model="form.price" style="width: 80px;" />
                </FormItem>

                <FormItem label="公司名称" :label-width="70">
                    <Input v-model="form.price" style="width: 80px;" />
                </FormItem>


                <FormItem label="手机号" :label-width="60">
                    <Input v-model="form.description"/>
                </FormItem>

                <FormItem label="姓名" :label-width="60">
                    <Input v-model="form.description"/>
                </FormItem>

                <FormItem>
                    <DatePicker type="datetime" placeholder="支付时间" format="yyyy-MM-dd"
                                v-model="filters.startDate"></DatePicker>
                    </Col>
                </FormItem>

                <FormItem>
                    <DatePicker type="datetime" placeholder="到期时间" format="yyyy-MM-dd"
                                v-model="filters.endDate">
                    </DatePicker>
                </FormItem>

                <FormItem label="地址" :label-width="60">
                    <Input v-model="form.description"/>
                </FormItem>
                <FormItem :label-width="30" >
                    <Button type="primary" size="large" :loading="loading" @click.native="insertOk">添加</Button>
                </FormItem>
            </Form>


            <!--表格-->
            <Table border stripe :columns="columns" :data="data.records" :loading="loading"></Table>
            <!--分页-->
            <pagination :data="data" :get-data="getData"></pagination>

            <!--新增编辑表单-->
            <statementsForm ref="statementsForm" :get-data="getData"></statementsForm>

            <!--新增logo界面-->
            <renderListForm ref="renderListForm" :get-data="getData"></renderListForm>

            <typeForm ref="typeForm" :get-data="getData"></typeForm>
        </Card>
    </div>
</template>
<!--财务详情列表-->
<script>
    import api from '../../api';
    import pagination from '../components/pagination';
    import statementsForm from './form';
    import renderListForm from './listForm';
    import moment from 'moment';
    import xlsx2json from '@/libs/xlsx2json';
    import XLSX from 'xlsx';
    import {saveAs} from 'file-saver';
    import Cookies from 'js-cookie';
    import typeForm from './type';

    export default {
//        分页和编辑
        components: {pagination, statementsForm, renderListForm, typeForm},
        data () {
            return {
                loading: true,
                exportLoading: false,
                filters: {
                    // systemUserName: '',
                    startDate: '',
                    endDate: '',
                    bankId: '',
                    userId: ''
                },
                logType: {1: '启动', 2: '欠费', 3: '停止'},
                statementsTotal: {},
                spinShow: true,
                buttonSHow: {
                    add : false,
                    update : false,
                    delete : false,
                    showP : true
                },
                bankList: [],
                userList: [],
                projectList: [],
                tList: [{value: '1', label: '启动'},{value: '2', label: '欠费'},{value: '3', label: '停止'} ],
                typeList: [
                    {
                        key: '',
                        title: '全部'
                    },
                    {
                        key: 1,
                        title: '启动'
                    },
                    {
                        key: 2,
                        title: '欠费'
                    },
                    {
                        key: 3,
                        title: '停止'
                    }

                ],
                columns: [
                    {
                        key: 'type',
                        title: '项目名称',
                        render: (h, params) => {
                            return this.logType[params.row.type];
                        }
                    },
                    {
                        key: 'price',
                        title: '公司名称'
                    },
                    {
                        key: 'createdAt',
                        title: '手机号'
                    },
                    {
                        key: 'information',
                        title: '姓名'
                    },
                    {
                        key: 'projectName',
                        title: '支付时间'
                    },
                    {
                        key: 'bankName',
                        title: '到期时间'
                    },
                    {
                        key: 'userName',
                        title: '类型'
                    },
                    {
                        key: 'description',
                        title: '地址'
                    },
                    {
                        title: '操作',
                        render: (h, params) => {
                            return h('div', [
                                this.renderEditButton(h, params),
                                this.renderDeleteButton(h, params),
                                this.renderList(h, params),
                                params.row.type === 3 ? this.renderEditType2Button(h, params) : params.row.type === 4 ? this.renderEditType1Button(h, params) : ''
                            ]);
                        }
                    }
                ],
                data: {},
                form: {},
                formRules: {
                    price: [
                        {required: false, message: '金额不能为空', trigger: 'blur'}
                    ],
                    description: [
                        {required: true, message: '对方信息不能为空', trigger: 'blur'}
                    ],
                    information: [
                        {required: true, message: '备注不能为空', trigger: 'blur'}
                    ]
                }

            };
        },
        methods: {
            // 获取列表数据
            getData (current, size) {
                if (current) this.filters.current = current;
                if (size) this.filters.size = size;

                if (this.filters.startDate !== '') {
                    this.filters.startDate = moment(this.filters.startDate).format('YYYY-MM-DD HH:mm:ss');
                }
                ;

                if (this.filters.endDate !== '') {
                    this.filters.endDate = moment(this.filters.endDate).format('YYYY-MM-DD HH:mm:ss');
                }
                ;

                api.statementsIndex(this.filters).then(data => {
                    this.loading = false;

                    if (data.code === 0) {
                        this.data = data.data;
                    }
                });

                this.spinShow = true;
                api.statementsTotal(this.filters).then(data => {
                    if (data.code === 0) {

                        this.statementsTotal = data.data;
                        this.spinShow = false;
                    }
                });
            },
            insertOk () {
                let request = api.statementsInsert(this.form);
                request.then(data => {
                    if (data.code === 0) {
                        this.getData();
                    }
                });
            },
            // 打开新增Modal
            create () {
                this.$refs.statementsForm.open('新增');
            },
            // 判断按钮是否显示
            isShow () {
                api.roleShow({id: parseInt(Cookies.get('access'))}).then(data => {
                    if (data.code === 0) {
                        data.data.forEach(authority => {
                            if (authority.authorityId === 6) {this.buttonSHow.add = true}
                            if (authority.authorityId === 7) {this.buttonSHow.update = true}
                            if (authority.authorityId === 8) {this.buttonSHow.delete = true}
                        });
                    }
                });

                let pid = Cookies.get('projectId');
                console.log(pid);
                if (pid !== '' && pid !== '0' && pid !== 'undefined' && pid !== null){
                    this.buttonSHow.showP = false;
                }
            },
            // 删除
            destroy (id) {
                api.statementsDelete({statementsId: id}).then(data => {
                    if (data.code === 0) {
                        this.getData();
                    }
                });
            },
            handleUpload (file) {
                const fileReader = new FileReader();
                fileReader.onload = (e) => {
                    const data = e.target.result;
                    const statements = xlsx2json.toJson(data, ['typeName', 'price', 'information', 'description', 'bankName']);
                    api.statementsAllInsert(statements).then(data => {
                        if (data.code === 0) {
                            this.getData();
                        }
                    });
                };

                fileReader.readAsBinaryString(file);
                return false;
            },
            // 渲染表格编辑按钮
            renderEditButton (h, params) {
                return h('Button', {
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    style: {
                        display: this.buttonSHow.update === true ? '' : 'none'
                    },
                    on: {
                        click: () => {
                            // 打开编辑Modal
                            this.$refs.statementsForm.open('编辑', params.row.statementsId);
                        }
                    }
                }, '编辑');
            },
            // 渲染表格修改
            renderEditType1Button (h, params) {
                return h('Button', {
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    style: {
                        display: this.buttonSHow.update === true ? '' : 'none',
                        marginLeft: '5px'
                    },
                    on: {
                        click: () => {
                            this.$refs.typeForm.openType('编辑', params.row.statementsId);
                        }
                    }
                }, '已付款');
            },
            // 渲染表格修改
            renderEditType2Button (h, params) {
                return h('Button', {
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    style: {
                        display: this.buttonSHow.update === true ? '' : 'none',
                        marginLeft: '5px'
                    },
                    on: {
                        click: () => {
                            this.$refs.typeForm.openType('编辑', params.row.statementsId);
                        }
                    }
                }, '已收款');
            },
            updateType (id) {
                api.statementsUpdateType({statementsId: id}).then(data => {
                    if (data.code === 0) {
                        this.getData();
                    }
                });
            },
            // 渲染log按钮
            renderList (h, params) {
                return h('Button', {
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    style: {
                        marginLeft: '5px'
                    },
                    on: {
                        click: () => {
                            // 打开日志Modal
                            this.$refs.renderListForm.getLogList(1, 10, params.row.statementsId);
                        }
                    }
                }, '日志');
            },
            // 渲染表格删除按钮
            renderDeleteButton (h, params) {
                return h('Poptip', {
                    props: {
                        confirm: true,
                        title: '确定是否删除?',
                        transfer: true
                    },
                    style: {
                        display: this.buttonSHow.delete === true ? '' : 'none'
                    },
                    on: {
                        'on-ok': () => {
                            this.destroy(params.row.statementsId);
                        }
                    }
                }, [
                    h('Button', {
                        style: {
                            marginLeft: '5px'
                        },
                        props: {
                            type: 'error',
                            placement: 'top',
                            size: 'small'
                        }
                    }, '删除')
                ]);
            },
            exportXlsx () {
                this.exportLoading = true;
                if (this.filters.startDate !== '') {
                    this.filters.startDate = moment(this.filters.startDate).format('YYYY-MM-DD HH:mm:ss');
                }
                ;

                if (this.filters.endDate !== '') {
                    this.filters.endDate = moment(this.filters.endDate).format('YYYY-MM-DD HH:mm:ss');
                }
                ;
                api.statementsList(this.filters).then(data => {
                    if (data.code === 0) {
                        if (data.data.length === 0) {
                            return;
                        }

                        const orderArray = [
                            [
                                '类型', '金额', '对方信息', '备注', '银行信息'
                            ]
                        ];
                        data.data.forEach(item => {
                            orderArray.push(
                                [
                                    this.logType[item.type], item.price, item.information, item.description, item.bankName
                                ]
                            );
                        });

                        const ws = XLSX.utils.aoa_to_sheet(orderArray);
                        const wb = XLSX.utils.book_new();
                        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
                        const wbout = XLSX.write(wb, {type: 'array', bookType: 'xlsx'});
                        saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '财务信息列表.xlsx');
                        this.exportLoading = false;
                    }
                });
            },
        },
        // 初始化
        mounted () {
            this.getData();
            this.isShow();
            api.bankList().then(data => {
                if (data.code === 0) {
                    this.bankList = data.data;
                }
            });
            api.userList().then(data => {
                if (data.code === 0) {
                    this.userList = data.data;
                }
            });
            api.projectList().then(data => {
                if (data.code === 0) {
                    this.projectList = data.data;
                }
            });
        }
    };
</script>
